<template>
  <div class="ncontainer">
    <el-dialog
      :title="topTitle.topTitle"
      :visible.sync="open"
      width="1400px"
      append-to-body
    >
      <el-row :gutter="20">
        <!--部门数据-->
        <el-col :span="6" :xs="24">
          <div class="head-container">
            <el-input
              v-model="deptName"
              :placeholder="$t('please_enter', { name: $t('department_name') })"
              clearable
              size="small"
              prefix-icon="el-icon-search"
              style="margin-bottom: 20px"
            />
          </div>
          <div class="btn">
            <div class="btn-one">
              <el-button size="mini" @click="handleGoPage(1)">{{
                $t("position_settings")
              }}</el-button>
              <el-button size="mini" @click="handleGoPage(2)">{{
                $t("workflow_settings")
              }}</el-button>
              <el-button size="mini" @click="handleGoPage(3)">{{
                $t("employee_fields_settings")
              }}</el-button>
            </div>
            <div class="btn-one" style="margin: 4px 0">
              <el-button size="mini" @click="handleGoPage(4)">{{
                $t("appraisal_configuration")
              }}</el-button>
              <el-button size="mini" @click="handleGoPage(5)">{{
                $t("notification_settings")
              }}</el-button>
              <el-button size="mini" @click="handleGoPage(6)">{{
                $t("administrator")
              }}</el-button>
            </div>
          </div>
          <div class="head-container">
            <el-tree
              :data="deptOptions"
              :props="defaultProps"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="tree"
              node-key="id"
              default-expand-all
              highlight-current
              @node-click="handleNodeClick"
            >
              <!-- <div slot-scope="{ node, data }">
                <span>新增子部门</span>
              </div> -->
              <div class="tree-tuo" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <div class="tree-tuo-show">
                  <el-dropdown>
                    <span class="el-icon-more icons"> </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item
                        @click.native="handleUpdataDepart(data)"
                        v-if="data.parentId != 0"
                        >{{ $t("modify_department_name") }}</el-dropdown-item
                      >
                      <el-dropdown-item @click.native="handleAddDepart(data)">{{
                        $t("add_sub_department")
                      }}</el-dropdown-item>
                      <el-dropdown-item
                        @click.native="handleDels(data)"
                        v-if="data.parentId != 0"
                        >{{ $t("delete_department") }}</el-dropdown-item
                      >
                      <el-dropdown-item @click.native="handleFu(data)">{{
                        $t("set_person")
                      }}</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </div>
            </el-tree>
          </div>
        </el-col>
        <!--用户数据-->
        <el-col :span="16" :xs="24">
          <div style="margin-bottom: 10px" v-if="depData.deptName">
            {{ `${depData.deptName}  ${total}${$t("people")}` }}
          </div>
          <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            
          >
            <el-form-item :label="$t('employee_name')" prop="employeeName">
              <el-input
                v-model="queryParams.employeeName"
                :placeholder="$t('please_enter', { name: $t('employee_name') })"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="getList"
                >{{ $t("search") }}</el-button
              >
            </el-form-item>
          </el-form>
          <el-button size="mini" @click="handletableOpt(1)">{{
            $t("add_new_employee")
          }}</el-button>
          <el-button size="mini" @click="handletableOpt(2)">{{
            $t("import_employee")
          }}</el-button>
          <el-button size="mini" @click="handletableOpt(3)">{{
            $t("export_employee")
          }}</el-button>
          <el-table
            v-loading="loading"
            :data="userList"
            style="margin-top: 20px"
            border
            :max-height="tableHeight"
          >
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column
              :label="$t('name')"
              align="center"
              key="employeeName"
              prop="employeeName"
            />
            <el-table-column
              :label="$t('position')"
              align="center"
              key="position"
              prop="position"
              :formatter="positionformatter"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="$t('mobile_phone_number')"
              align="center"
              key="phone"
              prop="phone"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="$t('emailbox')"
              align="center"
              key="email"
              prop="email"
              :show-overflow-tooltip="true"
            />
            <el-table-column fixed="right" :label="$t('action')" width="100">
              <template slot-scope="scope">
                <el-button
                  @click="handleupdates(scope.row)"
                  type="text"
                  size="small"
                  >{{ $t("edit") }}</el-button
                >
                <el-button
                  @click="handledel(scope.row)"
                  type="text"
                  size="small"
                  >{{ $t("delete") }}</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
            :page-sizes="[10,20,30,50,100, 200]"
          />
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">{{
          $t("confirm")
        }}</el-button>
        <el-button @click="cancel">{{ $t("cancel") }}</el-button>
      </div>
    </el-dialog>
    <updataDepartName
      ref="departname"
      @handleSuccess="handleSuccess"
    ></updataDepartName>
    <updataFuzeren
      ref="fuzeren"
      @handleSuccess="setResponsiblePerson"
    ></updataFuzeren>
    <guoprion
      ref="handleguoprion"
      :empId="info.id"
      :type="types"
      @refreshList="refreshList"
      :fieldConfig="fieldConfig"
    ></guoprion>
    <!-- 导入弹窗 -->
    <importModal
      ref="importModal"
      title="雇员导入"
      downloadUrl="business/employee/base/downloadTemplate.do"
      uploadUrl="business/employee/base/importTemplate.do"
      downloadName="employee"
      @refreshList="getList"
    ></importModal>
  </div>
</template>

<script>
import { pageListByEmployer, delEmployee } from "@/api/custom/employeeList";
import { deptTree } from "@/api/custom/employerList";
import updataDepartName from "./updataDepartName.vue";
import importModal from "@/views/components/custom/importModal.vue";
import updataFuzeren from "./updataFuzeren";
import guoprion from "../employeeList/edit.vue";
import {
  employeefieldconfigInfo,
  setResponsiblePerson,
} from "@/api/custom/employerList";
export default {
  components: {
    updataDepartName,
    updataFuzeren,
    guoprion,
    importModal,
  },
  data() {
    return {
      open: false,
      loading: false,
      userList: [],
      depData: {},
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        empName: null,
        dimissionType: null,
        transactor: null,
      },
      defaultProps: {
        children: "children",
        label: "deptName",
      },
      deptName: "",
      // 部门树选项
      deptOptions: undefined,
      topTitle: "",
      tuoShow: false,
      info: {},
      types: 0,
      fieldConfig: {},
    };
  },
  created() {
    this.getFieldConfig();
  },
  methods: {
    setResponsiblePerson(employeeId) {
      setResponsiblePerson({
        employerId: this.info.id,
        employeeId,
      }).then((res) => {
        this.$message.success(this.$t("operation_successful"));
      });
    },
    getFieldConfig() {
      employeefieldconfigInfo().then((res) => {
        this.fieldConfig = JSON.parse(res.data.fieldConfig);
      });
    },
    // 列表职位
    positionformatter(item) {
      if (item.employmentVOList) {
        return item.employmentVOList.position;
      } else {
        return "";
      }
    },
    handletableOpt(type) {
      if (type == 1) {
        this.$refs.handleguoprion.handleAdd();
        // handleUpdate--编辑
      }
      if (type == 2) {
        // 导入雇员
        this.$refs.importModal.showModal();
      }
      if (type == 3) {
        // 到处雇员
        /** 导出按钮操作 */
        this.download(
          "business/employee/base/export",
          {
            ...this.queryParams,
          },
          `employee_${new Date().getTime()}.xlsx`
        );
      }
    },
    handleupdates(row) {
      this.$refs.handleguoprion.handleUpdate(row);
    },

    handleUpdataDepart(data) {
      data.topTitle = this.$t("modify_department_name");
      this.$refs.departname.handlenames(data);
    },
    handleAddDepart(data) {
      data.topTitle = this.$t("add_sub_department");
      this.$refs.departname.handlenames(data);
    },
    handledel(data) {
      this.$modal
        .confirm(this.$t("delete_data"))
        .then(function () {
          return delEmployee(data.id);
        })
        .then((res) => {
          this.getList();
          this.getDeptTree();
          this.$modal.msgSuccess(this.$t("operation_successful"));
        })
        .catch(() => {});
    },
    handleFu(data) {
      this.$refs.fuzeren.handleSetPeo(data);
    },

    handleSuccess() {
      this.getDeptTree();
    },

    getList() {
      pageListByEmployer(this.queryParams).then((res) => {
        this.userList = res.data.records;
        this.total = res.data.total;
      });
    },
    handleChangeP(sign) {
      this.open = true;
      this.topTitle = sign.topTitle;
      this.info = sign.row;
      this.getDeptTree();
    },
    refreshList() {
      this.getList();
      this.getDeptTree();
    },
    submitForm() {
      this.open = false;
      this.$emit("handleAddPeople");
    },
    cancel() {
      this.open = false;
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.department = data.id;
      this.depData = data;
      this.getList();
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      // id:this.topTitle.deptId
      if (this.info.id) {
        deptTree(this.info.id).then((response) => {
          this.deptOptions = response.data;
        });
      }
    },
    handleGoPage(type) {
      if (type == 1) {
        this.$router.push("../employer/position");
      }
      if (type == 2) {
        this.$router.push("../employer/approvalWay");
      }
      if (type == 3) {
        this.$router.push("../employer/employeeWord");
      }
      if (type == 4) {
        this.$router.push("/performance/performanceGroup");
      }
      // 通知设置
      if (type == 5) {
        this.$router.push("/inform");
      }
      if (type == 6) {
        // 管理员
        this.$router.push("/employee/employeeHead/employeeHeadList");
      }
    },
  },
};
</script>

<style scoped lang="scss">
.tree-tuo {
  width: 100%;
  display: flex;
  justify-content: space-between;

  .icons {
    transform: rotate(90deg);
  }
}

.ncontainer {
  .pbig {
    display: flex;
    justify-content: space-between;

    .pbig-left {
      width: 30%;
      border: 1px solid red;
    }

    .pbig-right {
      width: 69%;
    }
  }
}
</style>
